<template>
  <div>
    <!-- 整个页面的外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <h1 style="float: left">老有所依|敬老院后台管理系统
        </h1>
        <div style="float: right;line-height: 60px;">
          <h2><i class="el-icon-user-solid"></i>
            <span style="font-size: 18px;margin-left: 10px;">{{username}}</span>
           <i class="el-icon-switch-button" style="font-size: 20px;font-weight:bolder;margin-left: 10px;" @click="outLogin"></i>
          </h2>
        </div>
      </el-header>
      <el-header>
      </el-header>
      <!-- 下半部分 -->
      <el-container class="layout-body">
        <!-- 下半部分的左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="white"
              text-color="black"
              active-text-color="#fff">
            <!-- 首页 -->
            <el-menu-item index="/admin/index">
              <i class="el-icon-s-home"></i>
              <span>首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title" >
                <i class="el-icon-s-cooperation"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item index="/admin/staff/add-new" >添加员工</el-menu-item>
              <el-menu-item index="/admin/staff/list">员工列表</el-menu-item>
              <el-menu-item index="/admin/staff/link">员工与老人关联</el-menu-item>

            </el-submenu>
            <el-submenu index="2">
              <template slot="title" >
                <i class="el-icon-s-cooperation"></i>
                <span>健康管理</span>
              </template>
              <el-menu-item index="/admin/older/list" >健康档案</el-menu-item>
              <el-menu-item index="/admin/ill/list" >病例档案</el-menu-item>
              <el-menu-item index="/admin/medicine/list">药品档案</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-promotion"></i>
                <span>生活管理</span>
              </template>
              <el-menu-item index="/admin/food">餐品管理</el-menu-item>
              <el-menu-item index="/admin/food-package">套餐管理</el-menu-item>
              <el-menu-item index="/admin/older-food-package">套餐订阅</el-menu-item>
              <el-menu-item index="/admin/outgoing">外出报备</el-menu-item>

            </el-submenu>


            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>入住管理</span>
              </template>
              <el-menu-item index="/admin/check/checkInfo">入住登记</el-menu-item>
              <el-menu-item index="/admin/bed/list">床位分配</el-menu-item>
              <el-menu-item index="/admin/bed/add-new">添加床位</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>事故管理</span>
              </template>
              <el-menu-item index="/admin/event">事故记录</el-menu-item>
              <el-menu-item index="/admin/visitor/list">访客记录</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-finance"></i>
                <span>费用查询</span>
              </template>
              <el-menu-item index="/admin/finance/list">入住费用</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 下半部分的右侧的主要区域 -->
        <el-main class="layout-main" style="height:100%;overflow: auto;">
          <el-backtop target=".layout-main" right="20"></el-backtop>  <!--  Backtop组件 -->
          <!-- 使用router-view显示主要区域的内容，即：由其它视图组件来显示主要区域的内容 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.layout-header {
  background: #E6A23C;
}

.layout-header h1 {
  color: #fff;
  line-height: 60px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}
.el-icon-switch-button:hover{
  color: lightblue;
}
.layout-aside {
  background: #ffffff !important;
  color: black !important;

}

.layout-aside i {
  margin-left:5px ;
  color: #E6A23C !important;
}

.layout-main {
  background: #fff;
}

.el-menu-item.is-active {
  background: #cc9137 !important;
}
</style>
<script>
export default {
  data()
  {
    return{
    username:""
    }
  },
  methods: {
    outLogin()
    {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem("jwt");
        localStorage.removeItem("username");
        location.reload();
      }).catch(() => {
      });

    }
  },
  mounted() {
    if( localStorage.getItem("jwt")==null)
    {
      this.$router.push("/login");
    }
    else
    {
      this.username =  localStorage.getItem("username");
    }

  }
}
</script>